<template>
    <div class="order-list" v-loading="loading">
        <div class="input-box" style="position: relative;">
            <span class="input-title" style="margin-left: 0">时间</span>
            <el-date-picker
                v-model="dataValue"
                type="daterange"
                align="right"
                :clearable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="toDateChange"
                :picker-options="pickerOptions">
            </el-date-picker>
            <!-- <el-button type="success" class="btn" style="position: absolute; right: 10px" @click="exportData">导出</el-button> -->
        </div>
        <div class="table-box">
            <el-table :data="tableData" ref="table" border :load="load" lazy :tree-props="{children: 'children', hasChildren: 'date'}" row-key="id" style="width: 100%">
                <el-table-column width="130" label="时间">
                    <template slot-scope="scope">
                        <span>{{ tableFormatDate(scope.row.date) }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="180" label="游戏">
                    <template slot-scope="scope">
                        <template v-if="scope.row.gameName">
                            <p>{{ scope.row.gameName }}<span v-if="scope.row.source">（{{ scope.row.source }}）</span></p>
                        </template>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="玩呗活跃">
                    <template slot-scope="scope">
                        <div>{{ scope.row.happyPlayActiveUser || '-' }}</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="下单用户数">
                    <template slot-scope="scope">
                        <div>{{ scope.row.happyPlayCreateOrderUserCount || '-' }}</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="110" label="订单数">
                    <template slot-scope="scope">
                        <div>{{ scope.row.happyPlayCreateOrderCount || '-' }}</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="200">
                    <template slot="header">
                        <div class="order-money">
                            <span>订单金额（元）</span>
                            <div style="margin-left: 5px">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        订单总金额：含超时追加订单，不含违规追加订单，刨除退款<br>
                                        号主收益：含超时追加订单，不含违规追加订单<br>
                                        平台预期收益：订单总金额*0.3<br>
                                        平台实际收益：订单总金额*0.3 - 券抵扣 - 超时订单平台垫付 - 罚款订单平台垫付
                                    </div>
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </div>                          
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <div style="margin-bottom: 5px">订单总金额：  {{ scope.row.orderNumber | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">用户支付：  {{ scope.row.applyNumber | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">用户待支付：  {{ scope.row.orderUnApplyNumber | baoshiToRMB}}</div>
                        <div style="margin-bottom: 5px">券抵扣：  {{ scope.row.couponNumber | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">号主收益：  {{ scope.row.goldEarnings | coinToRMB }}</div>
                        <div style="margin-bottom: 5px">平台预期收益：  {{ scope.row.contribution | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">平台实际收益：  {{ scope.row.nowContribution | baoshiToRMB }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column min-width="110" label="用户支付">
                    <template slot-scope="scope">
                        <div>{{ scope.row.applyNumber | baoshiToRMB }}</div>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column min-width="110" label="券抵扣">
                    <template slot-scope="scope">
                        <div>{{ scope.row.couponNumber | baoshiToRMB }}</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="号主收益">
                    <template slot-scope="scope">
                        <div>{{ scope.row.goldEarnings | coinToRMB }}</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="平台收益">
                    <template slot-scope="scope">
                        <div>{{ scope.row.contribution | baoshiToRMB }}</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="平台实际收益">
                    <template slot-scope="scope">
                        <div>{{ scope.row.nowContribution | baoshiToRMB }}</div>
                    </template>
                </el-table-column> -->
                <el-table-column min-width="110" label="退款订单">
                    <template slot-scope="scope">
                        <div style="margin-bottom: 5px"> 订单数量：{{ scope.row.drawBackOrderCount }}</div>
                        <div style="margin-bottom: 5px">总金额：{{ scope.row.giveBackDiamondIncome | baoshiToRMB }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column min-width="120" label="退款金额">
                    <template slot-scope="scope">
                        <div>{{ scope.row.giveBackDiamondIncome | baoshiToRMB }}</div>
                    </template>
                </el-table-column> -->
                <el-table-column min-width="200" label="违规订单">
                    <template slot-scope="scope">
                        <div style="margin-bottom: 5px">订单数量：{{ scope.row.punishCount }}</div>
                        <div style="margin-bottom: 5px">总金额：{{ scope.row.punishPrice | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">已支付订单：{{ scope.row.punishHasApplyCount }}</div>
                        <div style="margin-bottom: 5px">已支付金额：{{ scope.row.userApplyPunishPrice | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">待支付订单：{{ scope.row.punishNoApplyCount }}</div>
                        <div style="margin-bottom: 5px">待支付金额：{{ scope.row.punishNoApplyNumber | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">平台垫付号主：{{ scope.row.platFormApplyPunishPrice | baoshiToRMB }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column min-width="120" label="罚款金额">
                    <template slot-scope="scope">
                        <div>{{ scope.row.punishPrice | baoshiToRMB }}</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="平台垫付罚款">
                    <template slot-scope="scope">
                        <div>{{ scope.row.platFormApplyPunishPrice | baoshiToRMB }}</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" label="用户支付罚款">
                    <template slot-scope="scope">
                        <div>{{ scope.row.userApplyPunishPrice | baoshiToRMB }}</div>
                    </template>
                </el-table-column> -->
                <el-table-column min-width="200" label="超时订单">
                    <template slot-scope="scope">
                        <div style="margin-bottom: 5px">订单数量：{{ scope.row.upTimeOrderCount || '0' }}</div>
                        <div style="margin-bottom: 5px">总金额：{{ scope.row.upTimeOrderNumber | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">已支付订单：{{ scope.row.upTimeHasApplyCount || '0' }}</div>
                        <div style="margin-bottom: 5px">已支付金额：{{ scope.row.upTimeHasApplyNumber | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">待支付订单：{{ scope.row.upTimeNoApplyCount || '0' }}</div>
                        <div style="margin-bottom: 5px">待支付金额：{{ scope.row.upTimeNoApplyNumber | baoshiToRMB }}</div>
                        <div style="margin-bottom: 5px">平台垫付号主：{{ scope.row.upTimePlatformApply | baoshiToRMB }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column min-width="100" label="待支付">
                    <template slot-scope="scope">
                        <div style="margin-bottom: 5px"> 订单数量：{{ scope.row.unApplyCount }}</div>
                        <div style="margin-bottom: 5px">总金额：{{ scope.row.unApplyNumber | baoshiToRMB  }}</div>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column min-width="130" label="待结算金额">
                    <template slot-scope="scope">
                        <div>{{ scope.row.unApplyNumber | baoshiToRMB }}</div>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column min-width="120" label="累计待结算数量">
                    <template slot-scope="scope">
                        <div>{{ scope.row.totalApplyCount || '-' }}</div>
                    </template>
                </el-table-column> -->
                <el-table-column min-width="130" label="累计待支付">
                    <template slot-scope="scope">
                        <div style="margin-bottom: 5px"> 订单数量：{{ scope.row.totalApplyCount }}</div>
                        <div style="margin-bottom: 5px">总金额：{{ scope.row.totalApplyNumber | baoshiToRMB }}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div> -->
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
import { export2Excel } from '@/excel/util'

export default {
    data () {
        return {
            dataValue: [new Date() - 10 * 24 * 60 * 60 * 1000, new Date()],
            paramsList: {
                fromDate: formatDate(new Date() - 10 * 24 * 60 * 60 * 1000, 'YYYY-MM-DD') + ' 00:00:00',
                toDate: formatDate(new Date(), 'YYYY-MM-DD') + ' 23:59:59'
            },
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() > Date.now()
                }
            },
            tableData: [],
            pageNum: 1,
            total: 0,
            loading: false
        }
    },
    created () {
        this.getList(this.pageNum)
    },
    methods: {
        exportData() {
            this.columns = this.columns = [{
                title: '时间', key: 'dateDesc'
            },
            {
                title: '游戏', key: 'gameName'
            },
            {
                title: '玩呗活跃', key: 'happyPlayActiveUser'
            },
            {
                title: '下单用户数', key: 'happyPlayCreateOrderUserCount'
            },
            {
                title: '订单数', key: 'happyPlayCreateOrderCount'
            },
            // 订单金额
            {
                title: '订单总金额', key: 'orderNumber'
            },
            {
                title: '用户支付', key: 'applyNumber'
            },
            {
                title: '用户待支付', key: 'orderUnApplyNumber'
            },
            {
                title: '券抵扣', key: 'couponNumber'
            },
            {
                title: '号主收益', key: 'goldEarnings'
            },
            {
                title: '平台预期收益', key: 'contribution'
            },
            {
                title: '平台实际收益', key: 'nowContribution'
            },
            // 退款订单
            {
                title: '退款订单数量', key: 'drawBackOrderCount'
            },
            {
                title: '退款总金额', key: 'giveBackDiamondIncome'
            },
            // 违规订单
            {
                title: '违规订单数量', key: 'punishCount'
            },
            {
                title: '违规订单总金额', key: 'punishPrice'
            },
            {
                title: '违规订单已支付订单', key: 'punishHasApplyCount'
            },
            {
                title: '违规订单已支付金额', key: 'userApplyPunishPrice'
            },
            {
                title: '违规订单待支付订单', key: 'punishNoApplyCount'
            },
            {
                title: '违规订单待支付金额', key: 'punishNoApplyNumber'
            },
            {
                title: '违规订单平台垫付号主：', key: 'platFormApplyPunishPrice'
            },
            // 超时订单
            {
                title: '超时订单数量', key: 'upTimeOrderCount'
            },
            {
                title: '超时订单总金额', key: 'upTimeOrderNumber'
            },
            {
                title: '超时订单已支付订单', key: 'upTimeHasApplyCount'
            },
            {
                title: '超时订单已支付金额', key: 'upTimeHasApplyNumber'
            },
            {
                title: '超时订单待支付订单', key: 'upTimeNoApplyCount'
            },
            {
                title: '超时订单待支付金额', key: 'upTimeNoApplyNumber'
            },
            {
                title: '超时订单平台垫付号主', key: 'upTimePlatformApply'
            },
            // 累计待支付
            {
                title: '累计待支付订单数量', key: 'totalApplyCount'
            },
            {
                title: '累计待支付总金额', key: 'totalApplyNumber'
            }
            ]
            this.getList(1, true)
        },
        baoshiToRMB(val) {
            if (val) {
                return val / 100
            } else {
                return '0'
            }
        },
        coinToRMB (val) {
            if (val) {
                return Math.floor(val / 100) / 100
            } else {
                return '0'
            }
        },
        // 获取列表
        async getList (pageNum, flag) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            let params = {
                pageNum: pageNum,
                pageSize: 999999
            }
            // 导出数据
            if (flag) {
                params.pageSize = 1000000
            }
            params = Object.assign(params, this.paramsList)
            let res = await this.$http.post('/trade/selectOrderData', params)
            if (res.code === '0') {
                if (flag) {
                    res.data && res.data.forEach((item, index) => {
                        item.id = index + 1
                        item.dateDesc = this.tableFormatDate(item.date)
                        // 订单金额
                        item.orderNumber = `${this.baoshiToRMB(item.orderNumber)}`
                        item.applyNumber = `${this.baoshiToRMB(item.applyNumber)}`
                        item.orderUnApplyNumber = `${this.baoshiToRMB(item.orderUnApplyNumber)}`
                        item.couponNumber = `${this.baoshiToRMB(item.couponNumber)}`
                        item.goldEarnings = `${this.coinToRMB(item.goldEarnings)}`
                        item.contribution = `${this.baoshiToRMB(item.contribution)}`
                        item.nowContribution = `${this.baoshiToRMB(item.nowContribution)}`
                        // 退款订单
                        item.drawBackOrderCount = `${item.drawBackOrderCount}`
                        item.giveBackDiamondIncome = `${this.baoshiToRMB(item.giveBackDiamondIncome)}`
                        // 违规订单
                        item.punishCount = `${item.punishCount}`
                        item.punishPrice = `${this.baoshiToRMB(item.punishPrice)}`
                        item.punishHasApplyCount = `${item.punishHasApplyCount}`
                        item.userApplyPunishPrice = `${this.baoshiToRMB(item.userApplyPunishPrice)}`
                        item.punishNoApplyCount = `${item.punishNoApplyCount}`
                        item.punishNoApplyNumber = `${this.baoshiToRMB(item.punishNoApplyNumber)}`
                        item.platFormApplyPunishPrice = `${this.baoshiToRMB(item.platFormApplyPunishPrice)}`
                        // 超时订单
                        item.upTimeOrderCount = `${item.upTimeOrderCount}`
                        item.upTimeOrderNumber = `${this.baoshiToRMB(item.upTimeOrderNumber)}`
                        item.upTimeHasApplyCount = `${item.upTimeHasApplyCount}`
                        item.upTimeHasApplyNumber = `${this.baoshiToRMB(item.upTimeHasApplyNumber)}`
                        item.upTimeNoApplyCount = `${item.upTimeNoApplyCount}`
                        item.upTimeNoApplyNumber = `${this.baoshiToRMB(item.upTimeNoApplyNumber)}`
                        item.upTimePlatformApply = `${this.baoshiToRMB(item.upTimePlatformApply)}`
                        // 累计待支付
                        item.totalApplyCount = `${item.totalApplyCount}`
                        item.totalApplyNumber = `${this.baoshiToRMB(item.totalApplyNumber)}`
                    })
                    export2Excel(this.columns, res.data, '玩呗订单数据')
                } else {
                    this.tableData = res.data
                    this.tableData.forEach((item, index) => {
                        item.id = index + 1
                    })
                    this.total = res.count
                }
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        toDateChange (val) {
            this.paramsList.fromDate = formatDate(new Date(val[0]), 'YYYY-MM-DD') + ' 00:00:00'
            this.paramsList.toDate = formatDate(new Date(val[1]), 'YYYY-MM-DD') + ' 23:59:59'
            this.getList(1)
        },
        // 页码切换
        // sizeChange (val) {
        //     this.pageNum = 1
        //     this.pageSize = val
        //     this.getList(1)
        // },
        // // 页容切换
        // pageChange (val) {
        //     this.pageNum = val
        //     this.getList(this.pageNum)
        // },
        tableFormatDate (timestamp, type = 'YYYY-MM-DD') {
            return formatDate(timestamp, type)
        },
        // 加载子数据
        load (tree, treeNode, resolve) {
            this.$http.post('/trade/selectGameOrderData', {
                pageNum: 1,
                pageSize: 1,
                fromDate: formatDate(tree.date, 'YYYY-MM-DD') + ' 00:00:00',
                toDate: formatDate(tree.date, 'YYYY-MM-DD') + ' 23:59:59'
            }).then(res => {
                res.data.map((item, index) => {
                    delete item.date
                    // delete item.date
                    item.id = new Date(tree.date).getTime() / 10000 + index
                })
                console.log(res.data)
                resolve(res.data)
            })
        }
    },

    filters: {
        coinToRMB (val) {
            if (val) {
                return Math.floor(val / 100) / 100
            } else {
                return '0'
            }
        },

        baoshiToRMB (val) {
            if (val) {
                return val / 100
            } else {
                return '0'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .order-list {
        .order-money {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-top: 10px;
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            .cover {
                width: 80px;
                height: 80px;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
